<template>
  <div class="material-standards-container">
    <!-- 选项卡 -->
    <el-tabs v-model="activeTab" class="custom-tabs">
      <el-tab-pane label="厚度优秀样本" name="thickness"></el-tab-pane>
      <el-tab-pane label="边缘优秀样本" name="edge"></el-tab-pane>
    </el-tabs>

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 搜索区域 -->
      <div class="search-panel">
        <div class="search-row">
          <div class="search-item time-selection">
            <span class="label">时间</span>
            <el-radio-group v-model="searchParams.timeType" size="small">
              <el-radio-button label="start">开始时间</el-radio-button>
              <el-radio-button label="end">出库结束时间</el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="searchParams.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="custom-date-picker"
              size="small"
              style="margin-left: 10px; width: 240px"
            />
          </div>
          <div class="search-item">
            <span class="label">硅含量</span>
            <el-input v-model="searchParams.siliconContent" placeholder="请输入" class="custom-input" size="small" style="width: 100px" />
          </div>
          <div class="search-item">
            <span class="label">产品厚度区间</span>
            <el-select v-model="searchParams.thicknessRange" placeholder="请选择" clearable class="custom-select" size="small" style="width: 140px">
              <el-option label="6.0:0.55-0.7" value="6.0:0.55-0.7" />
              <el-option label="3.0:0.32-0.4" value="3.0:0.32-0.4" />
              <el-option label="4.0:1100.0-1150.0" value="4.0:1100.0-1150.0" />
            </el-select>
          </div>
          <div class="search-item">
            <span class="label">产品宽度区间</span>
            <el-select v-model="searchParams.widthRange" placeholder="请选择" clearable class="custom-select" size="small" style="width: 160px">
              <el-option label="2.0:1000.0-1050.0" value="2.0:1000.0-1050.0" />
              <el-option label="6.0:1200.0-1250.0" value="6.0:1200.0-1250.0" />
              <el-option label="3.0:1050.0-1100.0" value="3.0:1050.0-1100.0" />
            </el-select>
          </div>
          <div class="search-item">
            <span class="label">钢种</span>
            <el-select v-model="searchParams.steelGrade" placeholder="请选择" clearable class="custom-select" size="small" style="width: 100px">
              <el-option label="35-MKD" value="35-MKD" />
              <el-option label="2368" value="2368" />
            </el-select>
          </div>
        </div>
        <div class="search-row">
          <div class="search-item">
            <span class="label">冷卷号</span>
            <el-input v-model="searchParams.coldRollNo" placeholder="请输入" class="custom-input" size="small" />
          </div>
          <div class="search-item">
            <span class="label">热卷号</span>
            <el-input v-model="searchParams.hotRollNo" placeholder="请输入" class="custom-input" size="small" />
          </div>
          <div class="search-actions">
            <button class="btn query-btn" @click="handleSearch">查询</button>
            <button class="btn reset-btn" @click="handleReset">重置</button>
            <button class="btn export-btn">导出</button>
          </div>
        </div>
      </div>

      <!-- 表格和列选择器 -->
      <div class="table-area-wrapper">
        <!-- 表格主体 -->
        <div class="table-panel">
          <el-table
            :data="pagedTableData"
            style="width: 100%"
            height="100%"
            border
            highlight-current-row
            size="small"
            :header-cell-style="{
              background: '#2a5caa',
              color: '#fff',
              padding: '4px 8px',
              textAlign: 'center',
              fontWeight: 'normal',
              border: 'none',
            }"
            :cell-style="{ padding: '4px 8px', textAlign: 'center', color: '#c0c4cc', border: 'none' }"
            :row-style="{ background: '#0f2142' }"
          >
            <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" fixed="left" />

            <!-- Dynamically shown columns -->
            <el-table-column v-if="isColumnVisible('coldRollNo')" prop="coldRollNo" label="冷卷号" width="120" />
            <el-table-column v-if="isColumnVisible('hotRollNo')" prop="hotRollNo" label="热卷号" width="120" />
            <el-table-column v-if="isColumnVisible('steelGrade')" prop="steelGrade" label="钢种" width="80" />
            <el-table-column v-if="isColumnVisible('siliconContent')" prop="siliconContent" label="硅含量" width="80" />
            <el-table-column v-if="isColumnVisible('thicknessRange')" prop="thicknessRange" label="产品厚度区间" width="140" />
            <el-table-column v-if="isColumnVisible('widthRange')" prop="widthRange" label="产品宽度区间" width="160" />
            <el-table-column v-if="isColumnVisible('edgeScore')" prop="edgeScore" label="边缘评分" width="90" />
            <el-table-column v-if="isColumnVisible('prodTime')" prop="prodTime" label="生产时间" width="160" />

            <el-table-column v-if="isColumnVisible('f1ForcePreset')" label="1#轧制力设定实际偏差值" width="100" align="center" prop="f1ForcePreset" />
            <el-table-column v-if="isColumnVisible('f2ForcePreset')" label="2#轧制力设定实际偏差值" width="100" align="center" prop="f2ForcePreset" />
            <el-table-column v-if="isColumnVisible('f3ForcePreset')" label="3#轧制力设定实际偏差值" width="100" align="center" prop="f3ForcePreset" />
            <el-table-column v-if="isColumnVisible('f4ForcePreset')" label="4#轧制力设定实际偏差值" width="100" align="center" prop="f4ForcePreset" />
            <el-table-column v-if="isColumnVisible('f5ForcePreset')" label="5#轧制力设定实际偏差值" width="100" align="center" prop="f5ForcePreset" />

            <el-table-column v-if="isColumnVisible('f1TensionActual')" label="1#带钢张力实际值" width="100" align="center" prop="f1TensionActual" />
            <el-table-column v-if="isColumnVisible('f2TensionActual')" label="2#带钢张力实际值" width="100" align="center" prop="f2TensionActual" />
            <el-table-column v-if="isColumnVisible('f3TensionActual')" label="3#带钢张力实际值" width="100" align="center" prop="f3TensionActual" />
            <el-table-column v-if="isColumnVisible('f4TensionActual')" label="4#带钢张力实际值" width="100" align="center" prop="f4TensionActual" />

            <el-table-column v-if="isColumnVisible('f1EntrySpeed')" label="1机架入口速度[MPA]" width="120" align="center" prop="f1EntrySpeed" />
            <el-table-column
              v-if="isColumnVisible('f23RollGapSpeed')"
              label="2-3机架间带钢张力[MPA]"
              width="130"
              align="center"
              prop="f23RollGapSpeed"
            />
            <el-table-column
              v-if="isColumnVisible('f34RollGapSpeed')"
              label="3-4机架间带钢张力[MPA]"
              width="130"
              align="center"
              prop="f34RollGapSpeed"
            />
            <!-- Add more columns here based on the image... -->
            <el-table-column v-if="isColumnVisible('f4ExitSpeed')" label="4机架出口速度[MPA]" width="120" align="center" prop="f4ExitSpeed" />
          </el-table>
        </div>
        <!-- 列选择器 -->
        <div class="column-selector">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" size="small"> 全选 </el-checkbox>
          <el-checkbox-group v-model="visibleColumns" @change="handleCheckedColumnsChange">
            <el-checkbox v-for="col in allColumns" :key="col.prop" :label="col.prop" size="small">
              {{ col.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-panel">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          small
        />
      </div>
    </div>

    <!-- Placeholder for edge analysis tab -->
    <div v-if="activeTab === 'edge'" class="content-wrapper-placeholder">边缘优秀样本内容待添加...</div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed } from 'vue';

  // --- Interfaces ---
  interface SearchParams {
    timeType: string; // 'start' or 'end'
    dateRange: Date[];
    siliconContent: string;
    thicknessRange: string;
    widthRange: string;
    steelGrade: string;
    coldRollNo: string;
    hotRollNo: string;
  }

  // Define the extensive TableRow interface based on columns
  interface TableRow {
    id: number;
    coldRollNo: string;
    hotRollNo: string;
    steelGrade: string;
    siliconContent: number;
    thicknessRange: string;
    widthRange: string;
    edgeScore: number;
    prodTime: string;
    f1ForcePreset: number;
    f2ForcePreset: number;
    f3ForcePreset: number;
    f4ForcePreset: number;
    f5ForcePreset: number;
    f1TensionActual: number;
    f2TensionActual: number;
    f3TensionActual: number;
    f4TensionActual: number;
    f1EntrySpeed: number;
    f23RollGapSpeed: number;
    f34RollGapSpeed: number;
    f4ExitSpeed: number;
    // ... Add potentially dozens more properties based on the full table
  }

  interface ColumnOption {
    prop: keyof TableRow;
    label: string;
  }

  // --- State ---
  const activeTab = ref('thickness');
  const searchParams = reactive<SearchParams>({
    timeType: 'start',
    dateRange: [],
    siliconContent: '',
    thicknessRange: '',
    widthRange: '',
    steelGrade: '',
    coldRollNo: '',
    hotRollNo: '',
  });

  // --- Mock Table Data (Simplified Example) ---
  const allTableData = ref<TableRow[]>(
    Array.from({ length: 31064 }, (_, i) => ({
      id: i + 1,
      coldRollNo: `M308017${String(700 + i).padStart(4, '0')}`,
      hotRollNo: `M231055${String(200 + i).padStart(3, '0')}Y`,
      steelGrade: i % 4 === 0 ? '35-MKD' : '2368',
      siliconContent: 0,
      thicknessRange: i % 3 === 0 ? '6.0:0.55-0.7' : '3.0:0.32-0.4',
      widthRange: i % 3 === 0 ? '2.0:1000.0-1050.0' : '3.0:1050.0-1100.0',
      edgeScore: parseFloat((99 + Math.random()).toFixed(3)),
      prodTime: `2023-08-09 14:${String(10 + (i % 50)).padStart(2, '0')}:${String(10 + (i % 60)).padStart(2, '0')}`,
      f1ForcePreset: 0,
      f2ForcePreset: 0,
      f3ForcePreset: 0,
      f4ForcePreset: 0,
      f5ForcePreset: 0,
      f1TensionActual: parseFloat((9.13 - i * 0.1).toFixed(2)),
      f2TensionActual: parseFloat((-21.3 + i * 0.1).toFixed(2)),
      f3TensionActual: parseFloat((11.56 + i * 0.05).toFixed(2)),
      f4TensionActual: parseFloat((-7.82 - i * 0.01).toFixed(2)),
      f1EntrySpeed: 0,
      f23RollGapSpeed: parseFloat((138.13 + i * 0.5).toFixed(2)),
      f34RollGapSpeed: parseFloat((148.6 + i * 0.2).toFixed(2)),
      f4ExitSpeed: parseFloat((150.77 + i * 0.1).toFixed(2)),
    }))
  );

  // --- Column Visibility ---
  // Define ALL columns based on image for the selector
  const allColumns = ref<ColumnOption[]>([
    { prop: 'coldRollNo', label: '冷卷号' },
    { prop: 'hotRollNo', label: '热卷号' },
    { prop: 'steelGrade', label: '钢种' },
    { prop: 'siliconContent', label: '硅含量' },
    { prop: 'thicknessRange', label: '产品厚度区间' },
    { prop: 'widthRange', label: '产品宽度区间' },
    { prop: 'edgeScore', label: '边缘评分' },
    { prop: 'prodTime', label: '生产时间' },
    { prop: 'f1ForcePreset', label: '1#轧制力设定实际偏差值' },
    { prop: 'f2ForcePreset', label: '2#轧制力设定实际偏差值' },
    { prop: 'f3ForcePreset', label: '3#轧制力设定实际偏差值' },
    { prop: 'f4ForcePreset', label: '4#轧制力设定实际偏差值' },
    { prop: 'f5ForcePreset', label: '5#轧制力设定实际偏差值' },
    { prop: 'f1TensionActual', label: '1#带钢张力实际值' },
    { prop: 'f2TensionActual', label: '2#带钢张力实际值' },
    { prop: 'f3TensionActual', label: '3#带钢张力实际值' },
    { prop: 'f4TensionActual', label: '4#带钢张力实际值' },
    { prop: 'f1EntrySpeed', label: '1机架入口速度[MPA]' },
    { prop: 'f23RollGapSpeed', label: '2-3机架间带钢张力[MPA]' },
    { prop: 'f34RollGapSpeed', label: '3-4机架间带钢张力[MPA]' },
    { prop: 'f4ExitSpeed', label: '4机架出口速度[MPA]' },
    // ... Add ALL other columns shown in the selector pane of the image
  ]);

  // Initially show a subset of columns
  const defaultVisibleProps: Array<keyof TableRow> = [
    'coldRollNo',
    'hotRollNo',
    'steelGrade',
    'thicknessRange',
    'widthRange',
    'edgeScore',
    'prodTime',
    'f1TensionActual',
    'f2TensionActual',
    'f3TensionActual',
    'f4TensionActual',
    'f23RollGapSpeed',
    'f34RollGapSpeed',
  ];
  const visibleColumns = ref<Array<keyof TableRow>>([...defaultVisibleProps]);
  const checkAll = ref(defaultVisibleProps.length === allColumns.value.length);
  const isIndeterminate = ref(defaultVisibleProps.length > 0 && defaultVisibleProps.length < allColumns.value.length);

  const isColumnVisible = (prop: keyof TableRow) => {
    return visibleColumns.value.includes(prop);
  };

  const handleCheckAllChange = (val: boolean) => {
    visibleColumns.value = val ? allColumns.value.map((c) => c.prop) : [];
    isIndeterminate.value = false;
  };

  const handleCheckedColumnsChange = (value: Array<keyof TableRow>) => {
    const checkedCount = value.length;
    checkAll.value = checkedCount === allColumns.value.length;
    isIndeterminate.value = checkedCount > 0 && checkedCount < allColumns.value.length;
  };

  // --- Pagination ---
  const pagination = reactive({
    currentPage: 1,
    pageSize: 20, // Default to 20 as per image
    total: allTableData.value.length,
  });

  const pagedTableData = computed(() => {
    const start = (pagination.currentPage - 1) * pagination.pageSize;
    const end = start + pagination.pageSize;
    // Filtering logic would go here if search was implemented
    return allTableData.value.slice(start, end);
  });

  const indexMethod = (index: number) => {
    return (pagination.currentPage - 1) * pagination.pageSize + index + 1;
  };

  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    pagination.currentPage = 1;
  };

  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
  };

  // --- Handlers ---
  const handleSearch = () => {
    console.log('查询参数:', searchParams);
    // Reset to page 1 on new search
    pagination.currentPage = 1;
    // Add filtering logic here
  };

  const handleReset = () => {
    Object.keys(searchParams).forEach((key) => {
      const typedKey = key as keyof SearchParams;
      if (typedKey === 'dateRange') searchParams[typedKey] = [];
      else if (typedKey === 'timeType') searchParams[typedKey] = 'start';
      else searchParams[typedKey] = '';
    });
    pagination.currentPage = 1;
    console.log('重置参数');
  };
</script>

<style scoped>
  .material-standards-container {
    background-color: #0a1a3a;
    color: #c0c4cc;
    padding: 15px;
    height: 100%;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    font-size: 13px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Custom Tabs */
  :deep(.custom-tabs .el-tabs__header) {
    margin: 0 0 10px 0;
  }
  :deep(.custom-tabs .el-tabs__nav-wrap::after) {
    background-color: #3a5a8a;
    height: 1px;
  }
  :deep(.custom-tabs .el-tabs__item) {
    color: #c0c4cc;
    font-size: 14px;
    height: 35px;
    line-height: 35px;
  }
  :deep(.custom-tabs .el-tabs__item.is-active) {
    color: #409eff;
  }
  :deep(.custom-tabs .el-tabs__active-bar) {
    background-color: #409eff;
  }

  .content-wrapper {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .content-wrapper-placeholder {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a7aa4;
  }

  /* Search Panel */
  .search-panel {
    background-color: #1c2d5a;
    padding: 10px 15px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-bottom: 10px;
  }
  .search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 5px;
  }
  .search-row:last-child {
    margin-bottom: 0;
  }
  .search-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 5px;
  }
  .label {
    color: #c0c4cc;
    margin-right: 5px;
    white-space: nowrap;
    min-width: 85px; /* Adjusted for longer labels */
    text-align: right;
    font-size: 12px;
  }
  .time-selection .label {
    min-width: 40px;
  }

  :deep(.el-radio-button__inner) {
    background-color: #0a1a3a;
    border-color: #3a5a8a;
    color: #c0c4cc;
    box-shadow: none !important;
    font-size: 12px;
    padding: 5px 10px;
  }
  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
    background-color: #2979ff;
    border-color: #2979ff;
    color: #fff;
  }

  :deep(.custom-date-picker.el-date-editor) {
    height: 28px;
    background-color: #0a1a3a;
    border: 1px solid #3a5a8a;
    box-shadow: none;
  }
  :deep(.custom-date-picker .el-range-input),
  :deep(.custom-date-picker .el-range-separator) {
    color: #c0c4cc;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
  }
  :deep(.custom-date-picker .el-range-separator) {
    padding: 0 2px;
  }
  :deep(.custom-date-picker .el-input__icon) {
    line-height: 28px;
    color: #c0c4cc;
    font-size: 12px;
  }

  .custom-input,
  .custom-select,
  :deep(.el-input__wrapper),
  :deep(.el-select__wrapper) {
    height: 28px;
    line-height: 28px;
    background-color: #0a1a3a !important;
    border: 1px solid #3a5a8a !important;
    border-radius: 3px !important;
    color: #c0c4cc !important;
    box-shadow: none !important;
    font-size: 12px !important; /* Smaller font */
  }
  :deep(.el-input__inner) {
    color: #c0c4cc !important;
    height: 26px !important;
    line-height: 26px !important;
  }
  :deep(.custom-select .el-select__placeholder),
  :deep(.custom-select .el-select__caret) {
    color: #c0c4cc;
  }

  .custom-input {
    width: 140px;
  }
  .custom-select {
    width: 120px;
  }

  .search-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  .btn {
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 8px;
    color: #fff;
  }
  .query-btn {
    background-color: #2979ff;
  }
  .query-btn:hover {
    background-color: #5393ff;
  }
  .reset-btn {
    background-color: #3a5a8a;
  }
  .reset-btn:hover {
    background-color: #5a7aa4;
  }
  .export-btn {
    background-color: #2979ff;
  }
  .export-btn:hover {
    background-color: #5393ff;
  }

  /* Table Area */
  .table-area-wrapper {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    gap: 10px;
  }
  .table-panel {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    background-color: #1c2d5a;
    padding: 5px;
    border-radius: 3px;
    display: flex;
  }
  /* Column Selector */
  .column-selector {
    flex-shrink: 0;
    width: 200px;
    background-color: #1c2d5a;
    border: 1px solid #3a5a8a;
    border-radius: 4px;
    padding: 10px 15px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #3a5a8a #142a52;
  }
  .column-selector .el-checkbox-group {
    display: flex;
    flex-direction: column;
  }
  .column-selector .el-checkbox {
    color: #c0c4cc;
    margin-right: 0;
    margin-bottom: 4px;
    height: 24px; /* Adjust height for small checkbox */
  }
  :deep(.column-selector .el-checkbox__label) {
    font-size: 12px;
    padding-left: 6px;
  }
  :deep(.column-selector .el-checkbox__inner) {
    background-color: #0a1a3a;
    border-color: #3a5a8a;
  }
  :deep(.column-selector .el-checkbox__input.is-checked .el-checkbox__inner),
  :deep(.column-selector .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background-color: #2979ff;
    border-color: #2979ff;
  }

  /* Pagination Panel */
  .pagination-panel {
    background-color: #1c2d5a;
    padding: 5px 15px;
    border-radius: 3px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    margin-top: 10px;
  }
  /* Deep pagination styles (adjust for small size) */
  :deep(.el-pagination button),
  :deep(.el-pager li) {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin: 0 2px;
    font-size: 12px;
  }
  :deep(.el-pagination__jump .el-input__wrapper) {
    height: 22px;
    line-height: 22px;
    width: 35px;
    font-size: 12px;
  }
  :deep(.el-pagination__jump .el-input__inner) {
    height: 20px !important;
    line-height: 20px !important;
  }
  :deep(.el-pagination__sizes .el-select .el-input__wrapper) {
    height: 22px;
    line-height: 22px;
    font-size: 12px !important;
    width: 80px;
  }
  :deep(.el-pagination__sizes .el-select .el-input__inner) {
    height: 20px !important;
    line-height: 20px !important;
  }

  /* Table Styles */
  :deep(.el-table--small .el-table__cell) {
    padding: 4px 0;
  }
  :deep(.el-table .el-table__cell) {
    text-align: center;
  }
</style>
